<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <link rel="stylesheet" href="css/navigationBar.css">
    <title>导航栏</title>
</head>

<nav class="bg-white shadow">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
            <div class="flex">
                <a href="userMain.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">主页</a>
                <a href="orderQuery.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">订单查询</a>
                <a href="flightSearch.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">航班查询</a>
                <a href="ticketBooking.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">机票预订</a>
                <a href="ticketRefundOrCancellation.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">机票改签/退订</a>
            </div>
            <% if (session.getAttribute("user") == null) { %>
            <div class="flex">
                <a href="login.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">登录</a>
                <span class="text-gray-700 px-1 py-2 text-sm font-medium">|</span>
                <a href="userRegister.jsp" class="text-gray-700 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">注册</a>
            </div>
            <% } else { %>
            <div class="relative">
                <img src="images/avatar.png" alt="用户头像" class="w-8 h-8 rounded-full user-avatar hover:cursor-pointer" id="userAvatar">
                <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="userDropdown">
                    <a href="userInfo.jsp" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人信息</a>
                    <a href="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
            </div>
            <script>
                const userAvatar = document.getElementById('userAvatar');
                const userDropdown = document.getElementById('userDropdown');

                userAvatar.addEventListener('mouseover', function() {
                    userDropdown.classList.remove('hidden');
                });

                userDropdown.addEventListener('mouseleave', function() {
                    userDropdown.classList.add('hidden');
                });
            </script>
            <% } %>
        </div>
    </div>
</nav>